import DataModeCross from './components/data-mode/cross';
import DataModeGroup from './components/data-mode/group';
import VuiSheet from './xsh';
import DataUtils from './xsh/data-utils';
import zhCN from './xsh/locale/zh-cn';

/*
 *
 * @Author: Jevon
 * @Date: 2021-10-19 11:10:44
 */

const srcdata = {
  data: [
    { class: '一班', code: 'S000001', name: '张三', subject: '语文', score: 20 },
    { class: '一班', code: 'S000001', name: '张三', subject: '数学', score: 74 },
    { class: '一班', code: 'S000001', name: '张三', subject: '英语', score: 39 },
    { class: '一班', code: 'S000001', name: '张三', subject: '政治', score: 46 },
    { class: '一班', code: 'S000001', name: '张三', subject: '历史', score: 44 },
    { class: '一班', code: 'S000001', name: '张三', subject: '地理', score: 78 },
    { class: '一班', code: 'S000002', name: '李四', subject: '语文', score: 86 },
    { class: '一班', code: 'S000002', name: '李四', subject: '数学', score: 71 },
    { class: '一班', code: 'S000002', name: '李四', subject: '英语', score: 75 },
    { class: '一班', code: 'S000002', name: '李四', subject: '政治', score: 33 },
    { class: '一班', code: 'S000002', name: '李四', subject: '历史', score: 84 },
    { class: '一班', code: 'S000002', name: '李四', subject: '地理', score: 32 },
    { class: '一班', code: 'S000003', name: '王五', subject: '语文', score: 58 },
    { class: '一班', code: 'S000003', name: '王五', subject: '数学', score: 97 },
    { class: '一班', code: 'S000003', name: '王五', subject: '英语', score: 40 },
    { class: '一班', code: 'S000003', name: '王五', subject: '政治', score: 12 },
    { class: '一班', code: 'S000003', name: '王五', subject: '历史', score: 56 },
    { class: '一班', code: 'S000003', name: '王五', subject: '地理', score: 41 },
    { class: '二班', code: 'S000004', name: '赵六', subject: '语文', score: 95 },
    { class: '二班', code: 'S000004', name: '赵六', subject: '数学', score: 87 },
    { class: '二班', code: 'S000004', name: '赵六', subject: '英语', score: 10 },
    { class: '二班', code: 'S000004', name: '赵六', subject: '政治', score: 43 },
    { class: '二班', code: 'S000004', name: '赵六', subject: '历史', score: 35 },
    { class: '二班', code: 'S000004', name: '赵六', subject: '地理', score: 22 },
    { class: '二班', code: 'S000005', name: '钱七', subject: '语文', score: 25 },
    { class: '二班', code: 'S000005', name: '钱七', subject: '数学', score: 74 },
    { class: '二班', code: 'S000005', name: '钱七', subject: '英语', score: 20 },
    { class: '二班', code: 'S000005', name: '钱七', subject: '政治', score: 25 },
    { class: '二班', code: 'S000005', name: '钱七', subject: '历史', score: 78 },
    { class: '二班', code: 'S000005', name: '钱七', subject: '地理', score: 84 },
    { class: '二班', code: 'S000006', name: '孙八', subject: '语文', score: 81 },
    { class: '二班', code: 'S000006', name: '孙八', subject: '数学', score: 68 },
    { class: '二班', code: 'S000006', name: '孙八', subject: '英语', score: 16 },
    { class: '二班', code: 'S000006', name: '孙八', subject: '政治', score: 50 },
    { class: '二班', code: 'S000006', name: '孙八', subject: '历史', score: 91 },
    { class: '二班', code: 'S000006', name: '孙八', subject: '地理', score: 71 }
  ]
};

const container = document.getElementById('container');
container.style.height = window.innerHeight - 30 + 'px';
const config = {
  // edit | read
  mode: 'edit',
  showGrid: true,
  showContextmenu: true,
  view: {
    height: () => {
      return (container.offsetHeight || 354) - 70;
    },
    width: () => {
      return container.offsetWidth || 748;
    }
  },
  headerOption: {
    headerShow: true,
    headerCustom: (itemContainer, item, data) => {
      // 自定义表头
      if (itemContainer && item) {
        const text = document.createElement('div');
        text.innerText = item.text;
        text.style.cssText = 'float:left;line-height:22px;margin-left:8px';
        itemContainer.appendChild(text);
        const btn = document.createElement('div');
        const color = item.color || '#fff';
        btn.style.cssText = `background-color:${color};border:#333 1px solid;cursor: pointer;float:right;width:24px;height:12px;margin:4px 8px;`;
        btn.onclick = evt => {
          item.color = '#369';
          item.text = '字段';
          btn.style.backgroundColor = '#369';
          text.innerText = item.text;
          data.change();
        };
        itemContainer.appendChild(btn);
      }
    },
    headerData: []
  },
  row: {
    len: 150,
    height: 25
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60
  },
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    strike: false,
    underline: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false
    }
  }
};

VuiSheet.locale('zh-cn', zhCN);
const xs = new VuiSheet(config);

const withHeader = true;

xs.loadData(DataUtils.array2sheet(srcdata.data, withHeader));

const toGroup = groups => {
  xs.loadData(DataUtils.sheet2group(xs.getData(), groups, withHeader));
};
const toCross = (col, row, cross) => {
  xs.loadData(DataUtils.sheet2cross(xs.getData(), col, row, cross, withHeader));
};

const headerData = DataUtils.getHeaderData(xs.getData());
const dataModeGroup = new DataModeGroup(headerData, toGroup).init();
const dataModeCross = new DataModeCross(headerData, toCross).init();

xs.change(d => {
  console.log(DataUtils.sheet2array(d, withHeader));
});

const toolbar = document.createElement('div');
dataModeGroup.appendTo(toolbar);
dataModeCross.appendTo(toolbar);
container.appendChild(toolbar);
xs.appendTo(container);
